<template>
    <div class="container fixed privilege backgroundColor" style="padding-top: 0">
      <Header
        content="代理"
        :showBack="true"
        :background="{background:'unset'}"
      ></Header>
      <div class="privilegeBg">
        <div style="padding-top: 70px;position: relative;">
          <img src="../assets/image/note.png" alt="" style="width: 100%;display:block;">
          <img src="../assets/image/orange.png" alt="" style="position: absolute;height: 27px;right: 0;bottom:0px;left:89.6%">
          <img src="../assets/image/green.png" alt="" style="bottom: -10px;left: 0;position: absolute;display: block;height: 33px;">
        </div>
        <div class="warp font18">
          <div class="privilegeInviteTitle">
            <span>邀请好友赚奖励</span>
          </div>
          <div class="warpContent">
            <div style="background: #ffffff;position: relative;padding:50px 17px 25px;">
              <div class="cycle cycle1"></div>
              <div class="cycle cycle2"></div>
              <div class="cycle cycle3"></div>
              <div class="cycle cycle4"></div>
              <div class="flexBetween">
                <div style="color: #4E6C8E;text-align: left;" class="font14 flexBetween">
                  <div style="margin-right: 10px;">
                    我的邀请码
                  </div>
                  <div class="font20 colorPri" style="text-align: left;">
                    {{invateInput}}
                  </div>
                </div>
                <Copy :invateInput="invateInput"
                      butContent="复制"
                      :mini="true"
                      @copySuccess="copySuccess"
                      :classStyle="false"
                      className="inviteCode"
                      id="inviteCode"
                      target="#inviteCode"></Copy>
              </div>
              <div style="text-align: left;margin-top: 20px;">
                <div style="color: #4E6C8E;" class="font14">
                  我的邀请链接
                </div>
                <div class="flexBetween">
                  <div style="word-break: break-all;" class="font14 colorPri">
                    {{inviteUrl}}
                  </div>
                  <div v-if="configData.inviteUrl" style="text-align: right">
                    <Copy
                      :invateInput="inviteUrl"
                      butContent="复制"
                      :mini="true"
                      @copySuccess="copySuccess"
                      :classStyle="false"
                      className="inviteUrl"
                      id="inviteUrl"
                      target="#inviteUrl"
                    ></Copy>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="margin:0 12px;position: relative;" class="font17">
          <img src="../assets/image/icon.png" alt="" style="width: 43px;position: absolute;top: -16px;left: -10px;z-index: 2;">
          <div style="position: relative;z-index: 3">
            <div style="color:#0076FF;">
              推广奖励
            </div>
            <div style="color:#ffffff;background: #2382FF;height: 57px;line-height: 57px;text-align: center;border-radius: 5px;margin-top: 20px;">
              累计获得奖励：{{invateInfo.amount}} {{invateInfo.symbol}}
            </div>
          </div>
        </div>
      </div>
      <ul>
        <li v-for="item in inviteList" style="display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #F5F5F5;padding: 15px">
          <div >
            <div style="color:#014384;margin-bottom: 8px;" class="font16">
              {{item.nickname}}
            </div>
            <div style="color:#C3C3C3;" class="font13">
              {{item.timeline | timestamp('YY-MM-DD HH:MM')}}
            </div>
          </div>
          <div class="font18 colorPri">
            {{item.msg}}
          </div>
        </li>
        <li style="text-align: center;color:#014384;padding: 15px;" @click="goTo({name:'inviteListPage'})" v-if="inviteList.length>0">
          查看全部
        </li>
      </ul>
    </div>
</template>
<script>
import Header from './common/header.vue'
import Copy from './common/copy.vue'
import axios from 'axios'
export default{
  data(){
    return {
      invateInput:'',
      inviteUrl:'',
      configData:'',
      inviteList:[],
      invateInfo:''
    }
  },
  methods:{
    goTo(path){
      this.$router.push(path)
    },
    copySuccess(){
      this.showToastCom = false;
    },
    getConfig(){
      var that = this;
      axios.get('../../../static/config.json', {}).then((response)=>{
        that.configData = response.data;
        this.$jsonp('http://suo.im/api.php',{
          format:'jsonp',
          url:encodeURI(that.configData.inviteUrl + that.invateInput),
        }).then(json => {
          that.inviteUrl = json.url
        }).catch(err => {
          console.log(err)
        })
      }).catch(function (error) {
        console.log(error)
      });
    },
    invite(){
      this.service('invite',{
        page:1,
        pasesize:10
      },'get').then(res=>{
        console.log(res)
        this.inviteList = res.data;
      })
    },
    invite_basics(){
      this.service('invite_basics',{}).then(res=>{
        console.log(res)
//        this.onFetching1 = false;
        this.invateInfo = res.data.total_invite_profit[0];
        console.log(this.invateInfo)
//        this.$refs.scrollerMy.reset({top:0});
      })
    },
  },
  created(){
    this.invateInput = JSON.parse(localStorage.getItem('userInfo')).invite_code;
    this.getConfig();
    this.invite();
    this.invite_basics()
  },
  components:{
    Header,Copy
  }
}
</script>
<style>
  .privilegeBg{
    background: url("../assets/image/BG.png") no-repeat;
    box-sizing: border-box;
    background-size: 100%;
  }
  .privilege .vux-header .vux-header-title{
    color:#ffffff;
  }
  .privilege .warp{
    margin-top: 29px;
    margin-bottom: 32px;
    position: relative;

  }
  .warpContent{
    margin: 12px;
    background:#EEF3F7;
    border: 3.5px solid #EEF3F7;
    border-radius: 3px;
    box-shadow:0 8px 20px #0272F5;
  }
  .privilegeInviteTitle{
    position: absolute;
    top:-10px;
    left: 0;
    text-align: center;
    width: 100%;
    z-index:5;
  }
  .privilegeInviteTitle>span{
    height: 35px;
    line-height: 35px;
    display: inline-block;
    padding:0 23px;
    font-size: 17px;
    border-radius: 3px;
    color:#014384;
    background: -webkit-linear-gradient(left,#D4FAF8 , #FFE4A1);
    background: -o-linear-gradient(right, #D4FAF8 , #FFE4A1); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #D4FAF8 , #FFE4A1); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #D4FAF8 , #FFE4A1); /* 标准的语法（必须放在最后） */
  }
  .privilege .inviteUrl,.privilege .inviteCode{
    background: #647DFF;
    width:64px;
    height: 32px;
    padding:0!important;
    border:none;
  }
  .cycle{
    display: inline-block;
    width: 6px;
    height: 6px;
    position: absolute;
    background: #EEF3F7;
  }
  .cycle1{
    top:0;
    left: 0;
    border-radius:0px 0px 6px 0px;
  }
  .cycle2{
    top:0;
    right: 0;
    border-radius:0px 0px 0px 6px;
  }
  .cycle3{
    bottom:0;
    left: 0;
    border-radius:0px 6px 0px 0px;
  }
  .cycle4{
    bottom:0;
    right: 0;
    border-radius:6px 0px 0px 0px;
  }
</style>
